<template>
  <div class="reset" ref="reset">
    <div class="reset-wrapper">
      <v-header></v-header>
      <div class="title">重置密碼</div>
      <el-form :model="resetForm" :rules="resetRules" ref="resetForm">
        <el-form-item prop="newPwd">
          <el-input type="password" placeholder="請輸入新密碼" v-model="resetForm.newPwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" placeholder="確認新密" v-model="resetForm.checkPass" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-button class="submit-btn" @click="handleReset('resetForm')" type="primary">確定修改</el-button>
      <p @click="backToLogin" class="tip-description">返回登錄</p>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { resetPwd } from '@/Api/request'
export default {
  name: 'reset',
  data () {
    const validateCheckPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入確認密碼'))
      } else {
        if (this.resetForm.checkPass !== this.resetForm.newPwd) {
          callback(new Error('兩次密碼輸入不一致'))
        }
        callback()
      }
    }
    return {
      resetForm: {
        newPwd: '',
        checkPass: ''
      },
      resetRules: {
        newPwd: [
          { required: true, message: '請輸入登錄密碼', trigger: 'blur' },
          { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/, message: '密碼至少由大寫字母+小寫字母+數字，8-16位組成', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validateCheckPass, trigger: 'blur' }
        ]
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.path === '/forget') {
      next()
    } else {
      next(false)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
      console.log(this.$route.params)
    })
  },
  methods: {
    _initScroll () {
      this.resetScroll = new this.$BScroll(this.$refs.reset, {
        click: true,
        probeType: 3,
        autoBlur: false
      })
    },
    handleReset (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const dataJson = Object.assign({}, this.$route.params, {
            newPwd: this.resetForm.newPwd
          })
          resetPwd(dataJson).then(res => {
            if (res.status === 200) {
              this.$message({
                message: '密碼已重置，請登錄',
                center: true,
                type: 'success'
              })
              this.$router.push({
                name: 'login'
              })
            } else {
              this.$message({
                message: res.message,
                center: true,
                type: 'error'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    backToLogin () {
      this.$router.push({
        name: 'login'
      })
    }
  },
  components: {
    vHeader: Header
  }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
.reset-wrapper {
  .el-input__inner{
    height: 91px;
    line-height: 91px;
    padding: 0 26px;
    background:rgba(255,255,255,0);
    border: none;
    outline: none;
    font-size: 36px;
    color:rgba(206, 166, 207, 1);
  }
}
</style>

<style scoped lang="stylus" rel="stylesheet/stylus">
.reset-wrapper {
  padding: 37px 49px 57px;
  .header {
    margin-bottom: 75px;
  }
  .title {
    width: 140px;
    margin: 0 auto 28px;
    padding-bottom: 12px;
    margin-bottom: 64px;
    font-size: 34px;
    color: rgba(255, 255, 255, 1);
    line-height: 36px;
    text-align: center;
    border-bottom: 7px solid #fff;
  }
  .el-form {
    margin-bottom: 379px;
  }
  .el-input{
    width: 100%;
    height: 91px;
    line-height: 91px;
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.3);
  }
  .submit-btn {
    width: 100%;
    height: 91px;
    margin-bottom: 36px;
    border-radius: 46px;
    font-size: 36px;
    border: none;
    background: linear-gradient(to right, #1293FF, #6FBDFF);
    box-shadow: 0px 0px 4px 4px rgba(24,150,255,0.58);
  }
}
.tip-description{
  position: relative;
  box-sizing: border-box;
  width: 152px;
  padding: 0 20px;
  margin: 0 auto;
  font-size: 26px;
  color:rgba(255,255,255,1);
  line-height: 26px;
  text-align: center;
  &:before{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 15px;
    height: 9px;
    background-image: url("../assets/images/arrow.png");
    background-size: cover;
    transform: rotate(-90deg);
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .tip-description:before
    background-image: url("../assets/images/arrow@2x.png");
    background-size: cover;

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .tip-description:before
    background-image: url("../assets/images/arrow@3x.png");
    background-size: cover;
</style>
